<template>
	<view class="content">
		<view class="goods-img">
			<image :src="info.imgUrl" mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="goodsInfo">
				<view class="price"> {{ info.consumeNum || '0' }} {{ $tokenName }}  </view>
				<view class="goodsname">
					{{ info.name || '' }}
				</view>
				<view class="num">
					<text>月兑数量:{{
              info.monthlyExchange ? info.monthlyExchange : '0'
            }}</text>
					<view class="vip">
						<image src="/static/vip.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="way">
				<view style="padding: 10px 0 10px 10px"> 使用方法 </view>
				<view class="flex">
					<view>
						<image src="/static/way1.png" mode=""></image>
						<view>兑换权益</view>
					</view>
					<view>
						<view class="center">
							<view class="xline"></view>
							<image src="/static/way2.png" mode=""></image>
							<view class="xline1"></view>
						</view>
						<view>去对应场景使用权益</view>
					</view>
					<!--  -->
					<view>
						<image src="/static/way3.png" mode=""></image>
						<view>权益使用成功</view>
					</view>
				</view>
			</view>
			<view class="condition">
				<view> {{ $tokenName }}兑换条件</view>
				<view class="explain">
					<view> 兑换须知 </view>
					<view>
						兑换产品不可退换<br />
						为保证活动健康有序进行，如果在获取和使用过程中出现违规行为
						(如作弊领取、恶意套现、刷取信誉、虚假交易等)，我们将取消
						您的使用资格，并有权撤销违规交易。
					</view>
				</view>
				<view class="explain">
					<view> 有效期 </view>
					<view> 兑换后2天内有效 </view>
				</view>
			</view>
		</view>
		<view class="exchange">
			<view class="goExchange" @click.stop="exchangeBtn">立即兑换
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#fff" @change="popupchange">
				<view class="popup">
					<view>商品详情</view>
					<view class="goodinfo">
						<image :src="info.imgUrl" mode=""></image>
						<view class="rightinfo">
							<view>
								{{ info.name || '' }}
							</view>
							<view>
								<view class="price"> {{ info.consumeNum }}{{ $tokenName }} </view>
								<view class="num">
									月兑数量:{{
                    info.monthlyExchange ? info.monthlyExchange : '0'
                  }}
								</view>
							</view>
						</view>
					</view>
					<view style="margin-top: 20px"> 单位 </view>
					<view class="unit">
						{{ info.unit }}
					</view>
					<view class="exchangeNum">
						<text>兑换数量</text>
						<uni-number-box v-model="num" :min="1" @change="changeValue" />
					</view>
					<view class="exchangeNum" style="margin-bottom: 30px">
						<text>我的{{ $tokenName }}</text>
						<text>{{ info.tokenNum }} {{ $tokenName }}</text>
					</view>
					<view class="goExchange" @click.stop="submit">立即兑换
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		goExchangeById,
		exchangeGoods
	} from '@/apis/first'
	export default {
		data() {
			return {
				farmerCommodityId: '',
				memberId: '',
				num: 1,
				info: {},
				str: ''
			}
		},
		computed: {
			useToken() {
				return this.num * this.info.consumeNum
			},
			$tokenName(){
				return this.$config.tokenName;
			}
		},
		onLoad(option) {
			this.farmerCommodityId = option.farmerCommodityId
			this.memberId = option.memberId
			console.log(this.farmerCommodityId, this.memberId)
		},
		onShow() {
			this.goExchangeById()
		},
		methods: {
			popupchange(e) {
				console.log(e)
				if (!e.show) {
					this.$nextTick(() => {
						this.num = 1
					})
				}
			},
			async goExchangeById() {
				const res = await goExchangeById({
					farmerCommodityId: this.farmerCommodityId,
					memberId: this.memberId
				})
				if (res.code === 200) {
					const data = res.data
					// console.log(data)
					this.info = res.data
					this.str = JSON.stringify(data)
				} else {
					uni.utils.toast(res.message)
					// 后续可能要跳转首页
				}
			},
			async exchangeBtn() {
				if (this.info.tokenNum < this.useToken) {
					return uni.utils.toast('您的'+this.$tokenName+'不足，无法兑换')
				} else {
					this.$refs.popup.open('bottom')
				}
			},
			async submit() {
				const res = await exchangeGoods({
					commodityId: this.info.id,
					memberId: this.memberId,
					count: this.num
				})
				if (res.code === 200) {
					console.log(res, '兑换成功')
					this.$refs.popup.close()
					uni.utils.toast(res.message)
					let data = res.data
					uni.redirectTo({
						url: '/packageA/pages/exchangeSuccess/index?consumeNum=' +
							data.consumeNum +
							'&serialNum=' +
							data.serialNum
					})
				} else {
					uni.utils.toast(res.message)
				}
			},
			// change(value) {
			// 	this.num = value
			// },
			changeValue(value) {
				console.log('返回数值：', value)
				if (value > this.info.maxExchange) {
					this.$nextTick(() => {
						this.num = this.info.maxExchange
					})
					uni.utils.toast('最大兑换数量为' + this.info.maxExchange)
				}
			}
			// blur(e) {
			// 	console.log('blur:', e)
			// },
			// focus(e) {
			// 	console.log('focus:', e)
			// }
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f6f6f6;
	}

	.content {
		background-color: #f6f6f6;

		.goods-img {
			background-color: #f6f6f6;
			padding: 0 20rpx 20rpx;
			width: 100%;
			height: 500rpx;

			// border-radius: 10rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		// image:nth-child(1) {
		//   width: 100%;
		//   height: 310px;
		//   // position: fixed;
		//   // top: 0;
		//   // z-index: -1;
		// }
		.back {
			position: fixed;
			top: 10px;
			left: 10px;
			z-index: 9;
		}

		.main {
			z-index: 4;
			position: absolute;
			top: 250px;
			width: 100%;
			padding-bottom: 140px;
			text-align: center;
			background: #f6f6f6 !important;

			.goodsInfo {
				text-align: left;
				padding: 10px;
				width: calc(100% - 40rpx);
				background: #fff;
				border-radius: 6px;
				margin: 0 auto;

				.price {
					font-size: 20px;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #E53F26;
				}

				.goodsname {
					font-size: 16px;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #1a1a1a;
					margin-top: 10px;
				}

				.num {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 12px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #999999;

					.vip {
						font-size: 11px;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #83cc66;
					}

					image {
						width: 54px;
						height: 15px;
					}
				}
			}

			.way {
				width: calc(100% - 20px);
				height: 100px;
				margin: 0 auto;
				margin-top: 10px;
				background: #fff;
				border-radius: 8px;
				text-align: left;
				font-size: 16px;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #1a1a1a;

				image {
					width: 26px;
					height: 26px;
				}

				.flex {
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					font-size: 12px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #999999;
					margin: 0 20px;

					.center {
						position: relative;
						width: 100%;
					}

					.xline {
						width: 70%;
						height: 0px;
						border-radius: 0px 0px 0px 0px;
						opacity: 1;
						border: 1px dashed #999999;
						position: absolute;
						left: 76px;
						top: 50%;
						transform: translateY(-50%);
					}

					.xline1 {
						position: absolute;
						right: 76px;
						top: 50%;
						transform: translateY(-50%);
						width: 70%;
						height: 0px;
						border-radius: 0px 0px 0px 0px;
						opacity: 1;
						border: 1px dashed #999999;
					}
				}
			}

			.condition {
				text-align: left;
				padding: 10px;
				width: calc(100% - 20px);
				background: #fff;
				border-radius: 6px;
				margin: 0 auto;
				margin-top: 10px;

				>view:first-child {
					font-size: 16px;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #1a1a1a;
				}

				.explain {
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					margin-top: 20px;

					>view:first-child {
						font-size: 14px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #999999;
						width: 18%;
					}

					>view:last-child {
						max-width: 82%;
						font-size: 14px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
			}
		}

		.exchange {
			width: 100%;
			position: fixed;
			bottom: 0;
			background: #fff;
			z-index: 6;
		}

		.goExchange {
			height: 50px;
			line-height: 50px;
			text-align: center;
			// background-color: peachpuff;
			background: linear-gradient(270deg, #EA5B2F 0%, #F28639 100%);
			color: #fff;
			width: 90%;
			margin: 10px auto;
			margin-bottom: 30px;
			border-radius: 25px;
			font-size: 24px;
			font-weight: 500;
			font-size: 20px;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
		}

		.popup {
			width: 100%;
			padding: 20px;
			padding-bottom: 10px;
			// height: 50vh;
			font-size: 16px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #1a1a1a;

			.goodinfo {
				margin-top: 10px;
				display: flex;
				align-items: center;

				>image {
					width: 100px;
					height: 100px;
					border-radius: 6px;
					margin-right: 10px;
				}

				.rightinfo {
					height: 100px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					>view:first-child {
						font-weight: bold;
					}

					.price {
						font-size: 16px;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #e9320a;
					}

					.num {
						font-size: 12px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.unit {
				width: 53px;
				height: 24px;
				background: #ffede0;
				border-radius: 12px 12px 12px 12px;
				opacity: 1;
				border: 1px solid #ff5f1b;
				text-align: center;
				line-height: 24px;
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #ff5f1b;
				margin-top: 10px;
			}

			.exchangeNum {
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
				align-items: center;

				.uni-numbox {
					width: 400rpx;
				}

				// /deep/ .uni-numbox-btns {
				// 	border-radius: 40rpx;

				// 	.uni-numbox--text {
				// 		font-size: 35rpx !important;
				// 		font-weight: bold;
						
				// 	}
				// }
			}
		}
	}
</style>